<template>
	<view class="ComBox">
		<div class="ComList" v-for="item in ComListSon" :key="item.id" @click="ToDel(item.id)">
			<div class="ImgBOX">
				<img :src="item.img" class="Img" alt="">
			</div>
			<div class="Title">
				{{item.title}}
			</div>
			<div class="Price">
				￥{{item.price}}
			</div>
		</div>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		univerifyLogin
	} from '@/common/univerify.js'

	export default {
		data() {
			return {
				ComList: [], //被合并的列表
				ComListSon: [],
				page: 1, //页数
			};
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		onLoad() {
			this.page = 1
			this.getComList();

			this.renderImage = true;
			let usera = uni.getStorageSync('username')

			let uniIdToken = uni.getStorageSync('token')
			if (!uniIdToken || !usera) {
				uni.removeStorageSync('token')
				uni.removeStorageSync('username')
				uni.reLaunch({
					url: '../login/login',
				});
			}
			
		},
		onReachBottom: function() {
			//下拉触发事件
			// this.page++;
			// this.getDefault(this.page);
			console.log('触发了下拉加载更多的事件')
		},
		methods: {
			ToDel(id) {
				//参数在跳转页的onLoad(id){ console.log('id为' + id) } 中获取  
				// wx.showToast({
				// 	title: '将要跳转的详情页id为' + id,
				// 	icon: 'none',
				// 	duration: 500
				// });
				uni.showModal({
				    title: '提示',
				    content: '是否购买',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							wx.showToast({
								title: '购买成功',
								icon: 'none',
								duration: 500
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			getComList() { //参数为页数
				let token =uni.getStorageSync("token")
				uni.request({
				    url: 'http://localhost:8080/system/goods/lists', //仅为示例，并非真实接口地址。
					method: 'GET',
				    header: {
						'Authorization': "Bearer "+token,
				        'custom-header': 'hello' //自定义请求头信息
				    },
				    success: (res) => {
						console.log(res)
				  //       if(res.data.code===200){
						// 	console.log(res)
							
						// }
						this.ComListSon=res.data.rows
				    }
				});
			}
		},
		...mapMutations(['login']),
		guideToLogin() {
			uni.showModal({
				title: '未登录',
				content: '您未登录，需要登录后才能继续',
				/**
				 * 如果需要强制登录，不显示取消按钮
				 */
				showCancel: !this.forcedLogin,
				success: (res) => {
					if (res.confirm) {
						univerifyLogin().catch((err) => {
							if (err === false) return;
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/login'
								});
							} else {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						})
					}
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.ComBox {
		width: 690rpx; //根据微信定义设置  如非必要不建议改为100%；
		padding: 10rpx 30rpx;
		background-color: #f7f7f7;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.ComList {
			//未设置高度
			width: 270rpx;
			padding: 30rpx;
			background: #fff;
			border-radius: 8rpx;
			margin-top: 30rpx;

			.ImgBOX {
				width: 270rpx;
				height: 270rpx;
				border-radius: 12rpx;

				.Img {
					width: 100%;
					height: 100%;
				}
			}

			.Title {
				width: 270rpx;
				font-size: 32rpx;
				line-height: 44rpx;
				height: 88rpx;
				padding-top: 15rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.Price {
				width: 100%;
				height: 44rpx;
				line-height: 44rpx;
				padding-top: 15rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #D12324;
			}
		}
	}
</style>
